<template>
	<el-container class="ace-page-container">
		<el-header>
			<div class="left-panel">
				<el-button icon="el-icon-videoPlay" circle @click="handleRun"></el-button>
				<el-button icon="el-icon-Stopwatch" circle />
				<el-button icon="el-icon-CircleCheckFilled" circle />
				<el-button icon="el-icon-Management" circle />
				<el-button type="danger" icon="el-icon-Delete" circle />
			</div>
		</el-header>

		<el-main class="editor-main">
			<!-- 这个 div 尺寸由 CSS 固定，内容溢出则通过编辑器内部滚动 -->
			<div ref="aceEditorRef" class="ace-editor-content"></div>
		</el-main>
	</el-container>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject } from 'vue'
import { Plus, Share, Document, Delete } from '@element-plus/icons-vue'

// --- Ace Editor Imports ---
import ace from 'ace-builds'
ace.config.set('basePath', 'node_modules/ace-builds/src-min-noconflict');
import 'ace-builds/src-min-noconflict/theme-github'
import 'ace-builds/src-min-noconflict/mode-json5'
import 'ace-builds/src-min-noconflict/ext-searchbox'
import 'ace-builds/src-min-noconflict/ext-language_tools'
import 'ace-builds/src-min-noconflict/mode-sql'

// --- Component Logic ---
const aceEditorRef = ref(null)
let editorInstance = null
const props = defineProps(['onUpdate'])
const handleResize = () => {
	if (editorInstance) {
		editorInstance.resize()
	}
}

onMounted(() => {
	if (aceEditorRef.value) {
		editorInstance = ace.edit(aceEditorRef.value, {
			fontSize: 14,
			theme: 'ace/theme/github',
			mode: 'ace/mode/javascript',
			tabSize: 8,
			readOnly: false,
			enableBasicAutocompletion: true,
			enableLiveAutocompletion: true
			// 移除任何可能导致动态调整尺寸的配置
		})

		window.addEventListener('resize', handleResize)

		// 为了在 iframe 中也能在初始化时正确布局，可以轻微延迟
		setTimeout(() => {
			handleResize() // 手动触发一次 resize 以确保计算正确
		}, 100)

		const initialContent = JSON.stringify({ }, null, '\t')
		editorInstance.setValue(initialContent, -1)
	}
})

onUnmounted(() => {
	window.removeEventListener('resize', handleResize)
	if (editorInstance) {
		editorInstance.destroy()
	}
})

const handleRun = () => {
	const allCode = editorInstance.getValue()
	const userObject = JSON.parse(allCode)
	props.onUpdate(userObject)
}
</script>

<style scoped>
/* 【关键变化】不再使用 100vh，而是使用 100% */
.ace-page-container {
	/*
	 - 高度被设置为其父元素的 100%。
	 - 这要求其父元素（在 iframe 中通常是 <body> 或一个根 div）必须有一个明确的高度。
	 - position: relative 确保它成为其子元素的定位上下文。
	*/
	height: 100%;
	width: 100%;
	overflow: hidden; /* 防止页面级别滚动 */
	position: relative;
	box-sizing: border-box; /* 推荐，确保 padding/border 不会撑开元素 */
}

/* 【关键变化】高度计算基于父容器 */
.editor-main {
	padding: 0;
	/*
	 高度为父容器（.el-container）的 100%，减去 header 的 60px。
	 因为 .el-container 的高度是 100% - 60px，所以这里可以直接写 100%。
	 为了稳健，我们依然使用 flex 布局来自然分配空间。
	*/
	flex-grow: 1; /* 【推荐】使用 flex-grow: 1 自动填满剩余空间，比 calc 更健壮 */
	overflow: hidden;
	position: relative; /* 为绝对定位的子元素提供参考 */
}

/* 【关键】让 Ace Editor 完全填充其父容器 */
.ace-editor-content {
	/* 使用绝对定位填充整个 editor-main，可以避免一些潜在的 flex 或 margin 问题 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* 不需要 overflow 样式，Ace Editor 自己会处理滚动 */
}
</style>
